<template>
  <div class="box66">
    <el-row>
      <el-col :span="24">
        <div class="contener boderSet">
          <div class="grid-content bg-purple-dark" style="overflow: hidden">
            <el-col :span="24">
              <div class="fen">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item>申请管理</el-breadcrumb-item>
                  <el-breadcrumb-item :to="{path: '/teachingView' }">教学设备借入申请</el-breadcrumb-item>
                  <el-breadcrumb-item>发起借入申请</el-breadcrumb-item>
                </el-breadcrumb>
              </div>
            </el-col>
            <el-row>
              <el-col :span="4">
                <el-input v-model="input" placeholder="请输入内容" style="width: 200px; "></el-input>
              </el-col>

              <el-col :span="2">
                <el-button type="primary" style="background-color: #343961 ">查询</el-button>
              </el-col>

            </el-row>
            <!-- 表格 -->
            <div class="boderSet Table">
              <template>
                <el-table :data="borrowData" stripe style="width: 100%">
                  <el-table-column prop="className" label="分类" header-align="center" align="center">
                  </el-table-column>
                  <el-table-column prop="facilityName" label="名称" header-align="center" align="center">
                  </el-table-column>
                  <el-table-column prop="facilityEncoding" label="编码" header-align="center" align="center">
                  </el-table-column>
                  <el-table-column prop="facilityPrice" label="单价" header-align="center" align="center">
                  </el-table-column>
                  <el-table-column prop="facilityAmount" label="数量" header-align="center" align="center">
                  </el-table-column>
                  <el-table-column prop="facilitySpecification" label="规格" header-align="center" align="center">
                  </el-table-column>
                  <el-table-column prop="storageSite" label="存放地点" header-align="center" align="center">
                  </el-table-column>
                  <el-table-column label="是否唯一" header-align="center" align="center">
                    <template slot-scope="scope">
                      <el-tag v-if="scope.row.facilitySole" type="info">是</el-tag>
                      <el-tag v-else-if="scope.row.facilitySole" type="info">否</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="facilityTime" label="入库时间" header-align="center" align="center">
                  </el-table-column>
                  <el-table-column label="操作" header-align="center" align="center">
                    <template slot-scope="scope">
                      <!-- 新加 -->
                      <el-button type="info" @click="openAddData(scope.row.id)" size="mini">新加借入</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 分页 -->
      <el-col :span="24">
        <div class="fRight">
          <el-footer>
            <el-pagination background layout="prev, pager, next" @current-change="pageChange" :current-page="page"
              :page-size="limit" :total="count" pager-count="6">
            </el-pagination>
          </el-footer>
        </div>
      </el-col>
    </el-row>



    <el-dialog title="申请详情" :visible.sync="dialogFormVisible" :width="'1300px'">
      <el-form :model="form" ref="form">
        <el-table :data="tableData">
          <el-table-column property="className" label="分类" header-align="center" align="center"
            width="170"></el-table-column>
          <el-table-column property="facilityName" label="名称" header-align="center" align="center"></el-table-column>
          <el-table-column property="facilityEncoding" label="编码" header-align="center" align="center"></el-table-column>
          <el-table-column property="facilityPrice" label="单价" header-align="center" align="center"></el-table-column>
          <el-table-column property="facilityAmount" label="可用数量" header-align="center" align="center"></el-table-column>
          <el-table-column property="facilitySpecification" label="规格" header-align="center"
            align="center"></el-table-column>
          <el-table-column property="storageSite" label="存放地点" header-align="center" align="center"></el-table-column>
        </el-table>

        <el-form-item prop="region">
          <span>备注：</span>
          <el-input v-model="form[0].leaseDesc" placeholder="请输入内容" style="width: 520px; margin-top: 20px; margin-left: 77px" clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          借用数量：
          <el-input-number v-model="form[0].leaseNum" :step="1" style="width: 200px; margin-top: 20px; margin-left: 45px"></el-input-number>
        </el-form-item>
        <el-form-item prop="date1">
          借用时间：
          <el-date-picker v-model="form[0].leaseTime" type="date" placeholder="选择日期" style="width: 230px; margin-left: 47px"></el-date-picker>
        </el-form-item>

        <el-form-item prop="date2">
          预计归还时间：
          <el-date-picker v-model="form[0].returnTime" type="date" placeholder="选择日期" style="width: 230px; margin-left: 20px"></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-right: 580px">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="addData">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import serive from "../../serive/ApprovalOfBteSerive";
import timechuli from "./../../utils/timechuli";
export default {
  data() {
    return {
      dialogFormVisible: false,
      //页码
      limit: 10,
      page: 1,
      count: 0,
      //详情数组
      tableData: [],
      borrowData: [],//借入数据
      form: [{
        id: '',
        leaseDesc:'',//情况说明
        leaseNum:1,//领用数量
        leaseTime:'',//借用时间
        returnTime:''//归还时间

      }],
    };
  },
  computed: {
    //分页
    //显示当前页码
    pageChange(newPage) {
      this.page = newPage;
      console.log('当前页码：', newPage);
      this.getBorrow
      // :total="total" @current-change="pageChange2" :current-page="page" :page-size="limit"
    },

  },
  methods: {
    getBorrow() {
      serive.applicantPage(this.limit, this.page).then((res) => {
        console.log(res.data.data);
        this.borrowData = res.data.data
      })
    },
    openAddData(id) {
      this.dialogFormVisible = true
      console.log(id);
      this.form[0].id = id;
      // console.log(this.form.id);
      for (let i in this.borrowData) {
        if (this.borrowData[i].id == id) {
          this.tableData.push(this.borrowData[i])
          console.log(this.tableData);
          return
        }
      }
      
    },
    addData() {
      this.$confirm('是否发起申请?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let id = this.form[0].id
      let leaseDesc= this.form[0].leaseDesc
      let leaseNum= this.form[0].leaseNum
      let leaseTime= timechuli.msToDate(this.form[0].leaseTime)
      let returnTime= timechuli.msToDate(this.form[0].returnTime)
      let usableNum= this.tableData[0].facilityAmount
      // timechuli.msToDate(this.addForm.value1[0]);
      serive.applicantBorrow(id,leaseDesc,leaseNum,leaseTime,returnTime,usableNum).then((res=>{
        console.log(res);
      }))
      // console.log(leaseNum);
      // console.log(leaseTime);
      // console.log(returnTime);
      // console.log(usableNum);

      this.dialogFormVisible = false
      this.tableData = []
      this.form[0].leaseDesc = ''
      this.form[0].leaseNum = ''
      this.form[0].leaseTime = ''
      this.form[0].returnTime = ''
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });

      
    },
    // id,leaseDesc,leaseNum,leaseTime,returnTime,usableNum

    cancel(){
      this.dialogFormVisible = false
      this.tableData = []
      this.form[0].id = '';
      this.form[0].leaseDesc = ''
      this.form[0].leaseNum = ''
      this.form[0].leaseTime = ''
      this.form[0].returnTime = ''

    },

  },
  created() {
    this.getBorrow()
  },
};
</script>
<style  scoped>
/* .box66 {
  padding: 30px;
} */
.fanhui {
  /* margin-top: 30px; */
  margin-bottom: 20px;
}

.crumbs {
  margin: 10px 30px;
}

.contener {
  margin: 20px 30px;
  padding: 30px;
}

.boderSet {
  border-radius: 10px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.fRight {
  float: right;
}

.fen {
  margin: 0 0 15px 0;
}

.el-button {
  margin-right: 15px;
}

.Table {
  margin: 20px 0;
  margin-bottom: 20px;
  background-color: white;
  padding: 5px;

}
</style>
